<template>
  <div style="padding-top:85px;width:100%;display:flex;flex-direction:column;align-items:center;">
    <div id="edit">
      <div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:60px;">
        <div style="display:flex;flex-direction:row;align-items:center;">
          <i class="iconfont icon-fanhui pointer" @click="back" style="margin-right:8px;"></i>
          <div  class="pointer" style="font-size: 25px;" >文章发表</div>
        </div>
        <input type="button" value="发布" @click="fabiao" class="btn" />
      </div>

      <div id>
        <input type="text" placeholder="请输入标题(最多30字)" v-model="articlename" class="editinput" />
        <input type="text" placeholder="请输入关键字用分号隔开，不得超过三个" v-model="articlekeywords" class="editinput" />
        <div id="editor" class="editor">
          <!-- <editor-bar v-model="editor.info" :isClear="isClear"></editor-bar> -->
        </div>
      </div>
      <div>
        <div v-html="article.content"></div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.iconfont {
  font-size: 23px;
  margin-top: 3px;
}
#edit {
    width: 60%;
}
.btn {
  padding: 8px 30px;
  border-radius: 4px;
  background-color: #337ab7;
  color: #fff;
  cursor: pointer;
}
.editinput {
  width: 100%;
  height: 48px;
  line-height: 48px;
  color: #333333;
  font-size: 28px;
  font-family: PingFangSC-Semibold;
  margin: 35px 0 20px 0;
  border: none;
}
</style>
<script>
import E from "wangeditor";
export default {
  name: "editor",
  mounted() {
    this.userId = localStorage.getItem('Userid')
    this.sessionToken=localStorage.getItem('SessionToken')
    this.editor = new E("#editor");
    // 本地图片上传：关闭外部图片引入
    this.editor.customConfig.showLinkImg = false;
    this.editor.customConfig.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontSize',  // 字号
      'fontName',  // 字体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      'emoticon',  // 表情
      'image',  // 插入图片
      'table',  // 表格
      // 'video',  // 插入视频
      // 'code',  // 插入代码
      'undo',  // 撤销
      'redo'  // 重复
    ]
    this.editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      var formData = new FormData()
      // console.log(files)
      let file = files[files.length-1]
      console.log(file)
      formData.append('file', file)
      console.log(formData)
      $.ajax({
        url:"http://47.101.206.195:8888/article/uploadArticleImg",
        type:"post",
        contentType: false,
        // Accept:"application/json,text/plain",
        data:formData,
        processData:false,
        success:function(res){
          console.log(res)
          insert(res.data)
        }
      })
      // 上传代码返回结果之后，将图片插入到编辑器中
      // insert(imgUrl)
    }
    // 限制一次最多上传 5 张图片
    this.editor.customConfig.uploadImgMaxLength = 5
    this.editor.create();
    // editor.txt.html('<p>请输入文章内容</p>')
    this.$http.get('getInformation?id='+this.userId+'').then((resp) => {
        if (resp.data.status === 200) {
          console.log(resp.data)
          this.author = resp.data.data.name
        } else {
          this.$message(resp.data.msg)
        }
    })
  },
  data() {
    return {
      editor: null,
      editorContent: '',
      articlename:'',
      author:'',
      articlekeywords:'',
      article:{},
      userId:'',
      sessionToken:'',
    }
  },
  methods:{
    back() {
      this.$router.go(-1);
    },
    fabiao () {
      if(this.author !== ''){
        this.editorContent = this.editor.txt.html()//.toString()
        console.log(typeof this.editor.txt.html())
        let keywords = ''
        if(this.articlekeywords !== null){
          keywords = this.articlekeywords.split("；")
        }
        console.log(keywords[0])
        if(this.editorContent != '' && this.articlename !=''){
          this.article.articleName = this.articlename
          this.article.content = this.editorContent
          this.article.userId = this.userId
          this.article.author = this.author
          this.article.readingVolume = 0
          this.article.vote = 0
          this.article.keyword1 = ''
          this.article.keyword2 = ''
          this.article.keyword3 = ''
          if(keywords.length >= 1){
            this.article.keyword1 = keywords[0]
          }
          else if(keywords.length >= 2){
            this.article.keyword2 = keywords[1]
          }
          else if(keywords.length = 3) {
            this.article.keyword3 = keywords[2]
          }
          // console.log(article)
          this.article = JSON.stringify(this.article)
          let SessionToken = localStorage.getItem('SessionToken')
          console.log(this.article)
          this.$http.post('article/addArticle?sessionToken='+SessionToken+'',this.article,{headers:{'Content-Type':'application/json'}}).then((resp) => {
            if (resp.data.status === 200) {
              console.log(resp)
              this.$message.success('发表成功')
              // localStorage.setItem('communityid', resp.data.data)
              this.$router.push('/community')
            } else {
              console.log(resp)
              this.$message.error(resp.data.message)
            }
          })
        } else{
          this.$message.error('文章名或内容不能为空！')
        }
      }
    }
  }
}
</script>